<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>jQuery FormBuilder Demo</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
		<script type="text/javascript" src="js/jquery.formbuilder.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#form-builder').formbuilder({
					'save_url': 'example-save.php',
					'load_url': 'example-load.php'
				});
				$(function() {
			    	$("#form-wrap ul").sortable({ opacity: 0.6, cursor: 'move'});
			    });
			});
		</script>
		<style type="text/css">
			/* Demo css for jQuery form builder plugin */
			a, body { font-family: "Tahoma", "Verdana", sans-serif; font-size: 12px; }
			#form-wrap { width: 600px; }
			#form-builder li { list-style: none; background-color: #CFCFCF; margin-bottom: 5px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
			#form-builder .legend { padding: 5px; cursor: move;}
			.field_control { margin-left: 40px; }
			.frm-elements { background-color: rgba(255,255,255,0.70); margin: 0 4px 4px 4px; padding: 9px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
			.frm-elements label { width: 120px; float: left; margin: 0 15px; line-height: 24px; }
			.frm-elements .false-label { width: 120px; float: left; margin: 0 15px; font-size: 10px; text-transform: uppercase; font-weight: bold; line-height: 24px; }
			.frm-elements input[type=text] { float: left; width: 280px; }
			.frm-elements .fields {  float: left; }
			.frm-elements .fields input[type=checkbox], .frm-elements .fields input[type=radio] { float: left; margin: 5px 10px 0 0; }
			.frm-elements .fields input[type=text] { width: 220px; margin-top: 0; }
			.frm-elements .false-label, .frm-elements .fields { margin-top: 10px; }
			.frm-elements .fields div { clear: both; float: left; width: 300px; margin-bottom: 5px; }
			.frm-elements .fields label.auto { width: auto; margin: 0 0 5px 0; }
			.frm-elements .fields .remove { float: right; }
			.frm-elements .fields .add-area { width: 280px; margin-top: 5px; border-top: 1px solid rgba(255,255,255,0.125); }
			.frm-elements .fields .add-area .add { clear: both; float: right; }
			.frm-elements:after, .frm-fld:after  {content:".";display:block;height:0;clear:both;visibility:hidden;}
			.frm-elements, .frm-fld {display:inline-block;}
			.frm-elements, .frm-fld {display:block;}
			.del-button { padding: 5px 0 10px 15px; display:block; clear:both; width: 50px; }
		</style>

	</head>
	<body>
		
		<h1>jQuery Form Builder Plugin</h1>
		
		<p>This is a demonstration of a jQuery (1.3+) plugin we've developed for our custom CMS product at Trellis Development. It's entirely written in javascript, and loads form construction information through an XML file. In this demo, the xml file is an example but in the real product it's generated on the backend by PHP.</p>
		
		<p>This entire form builder is generated for us &ndash; all we needed to do give it the id of UL and a location for where to load/save the data. Just check out the source!</p>
		
		<p>For the nice scrolling, formbuilder uses the jQuery.scrollTo plugin. The demo css we're using here is not compatible with IE.</p>

		<p><a href="example-html.php">View sample rendered html</a>.</p>
		
		<div id="form-wrap">
			<ul id="form-builder">
				<li></li>
			</ul>
		</div>
	</body>
</html>